<template>
  <wd-toast />
  <view @click.stop="clickOutside">
    <demo-block title="基本用法">
      <view class="top">
        <wd-tooltip v-model:show="show1" placement="bottom-start" content="bottom-start 提示文字" @change="handleChange1">
          <wd-button :round="false">bottom-start</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show2" placement="bottom" content="bottom 提示文字" @change="handleChange2">
          <wd-button :round="false">bottom</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show3" placement="bottom-end" content="bottom-end 提示文字" @change="handleChange3">
          <wd-button :round="false">bottom-end</wd-button>
        </wd-tooltip>
      </view>
      <view class="left">
        <wd-tooltip v-model:show="show4" placement="right-start" content="right-start 提示文字" @change="handleChange4">
          <wd-button :round="false">right-start</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show5" placement="right" content="right 提示文字" style="margin: 20px 0" @change="handleChange5">
          <wd-button :round="false">right</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show6" placement="right-end" content="right-end 提示文字" @change="handleChange6">
          <wd-button :round="false">right-end</wd-button>
        </wd-tooltip>
      </view>
      <view class="right">
        <wd-tooltip v-model:show="show7" placement="left-start" content="left-start 提示文字" @change="handleChange7">
          <wd-button :round="false">
            left-start
            <wd-icon name="setting" />
          </wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show8" placement="left" content="left 提示文字" style="margin: 20px 0" @change="handleChange8">
          <wd-button :round="false">left</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show9" placement="left-end" content="left-end 提示文字" @change="handleChange9">
          <wd-button :round="false">left-end</wd-button>
        </wd-tooltip>
      </view>
      <view class="bottom">
        <wd-tooltip v-model:show="show10" placement="top-start" content="top-start 提示文字" @change="handleChange10">
          <wd-button :round="false">top-start</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show11" placement="top" content="top 提示文字" @change="handleChange11">
          <wd-button :round="false">top</wd-button>
        </wd-tooltip>
        <wd-tooltip v-model:show="show12" placement="top-end" content="top-end 提示文字" @change="handleChange12">
          <wd-button :round="false">top-end</wd-button>
        </wd-tooltip>
      </view>
    </demo-block>
    <demo-block title="显示关闭按钮">
      <view class="demo-left">
        <wd-tooltip v-model:show="show13" content="显示关闭按钮" placement="right" show-close @change="handleChange13">
          <wd-button :round="false">显示关闭按钮</wd-button>
        </wd-tooltip>
      </view>
    </demo-block>
    <demo-block title="多行文本">
      <view class="demo-left lines-demo">
        <wd-tooltip v-model:show="show14" placement="right" use-content-slot @change="handleChange14">
          <wd-button :round="false">多行文本</wd-button>
          <template #content>
            <view class="lines-content">
              <view>多行文本1</view>
              <view>多行文本2</view>
              <view>多行文本3</view>
            </view>
          </template>
        </wd-tooltip>
      </view>
    </demo-block>
    <demo-block title="控制显隐">
      <wd-button plain @click="control" size="small" class="button-control">{{ show15 ? '关闭' : '打开' }}</wd-button>
      <view class="demo-left demo-control">
        <wd-tooltip placement="top" content="控制显隐" v-model:show="show15">
          <wd-button :round="false">top</wd-button>
        </wd-tooltip>
      </view>
    </demo-block>
    <demo-block title="绑定事件">
      <view class="demo-left">
        <wd-tooltip v-model:show="show16" placement="right-end" :content="content" @open="onShow" @close="onHide" @change="handleChange16">
          <wd-button :round="false">事件</wd-button>
        </wd-tooltip>
      </view>
    </demo-block>
    <demo-block title="禁用">
      <view class="demo-left">
        <wd-tooltip v-model:show="show17" placement="right-end" content="禁用" disabled @change="handleChange17">
          <wd-button :round="false">禁用</wd-button>
        </wd-tooltip>
      </view>
    </demo-block>
  </view>
</template>
<script lang="ts" setup>
import { clickOut } from '@/uni_modules/wot-design-uni'
import { useToast } from '@/uni_modules/wot-design-uni'
import { ref } from 'vue'

const show1 = ref<boolean>(false)
const show2 = ref<boolean>(false)
const show3 = ref<boolean>(false)
const show4 = ref<boolean>(false)
const show5 = ref<boolean>(false)
const show6 = ref<boolean>(false)
const show7 = ref<boolean>(false)
const show8 = ref<boolean>(false)
const show9 = ref<boolean>(false)
const show10 = ref<boolean>(false)
const show11 = ref<boolean>(false)
const show12 = ref<boolean>(false)
const show13 = ref<boolean>(false)
const show14 = ref<boolean>(false)
const show15 = ref<boolean>(false)
const show16 = ref<boolean>(false)
const show17 = ref<boolean>(false)
const content = ref<string>('显示内容')

const toast = useToast()

function control() {
  //   this.setData({ show15: !this.data.show15 })
}
function onShow() {
  console.log('显示')
}
function onHide() {
  toast.show('文字提示关闭')
}
function handleChange1(event) {
  //   this.setData({ show1: event.detail.show })
}
function handleChange2(event) {
  //   this.setData({ show2: event.detail.show })
}
function handleChange3(event) {
  //   this.setData({ show3: event.detail.show })
}
function handleChange4(event) {
  //   this.setData({ show4: event.detail.show })
}
function handleChange5(event) {
  //   this.setData({ show5: event.detail.show })
}
function handleChange6(event) {
  //   this.setData({ show6: event.detail.show })
}
function handleChange7(event) {
  //   this.setData({ show7: event.detail.show })
}
function handleChange8(event) {
  //   this.setData({ show8: event.detail.show })
}
function handleChange9(event) {
  //   this.setData({ show9: event.detail.show })
}
function handleChange10(event) {
  //   this.setData({ show10: event.detail.show })
}
function handleChange11(event) {
  //   this.setData({ show11: event.detail.show })
}
function handleChange12(event) {
  //   this.setData({ show12: event.detail.show })
}
function handleChange13(event) {
  // this.setData({ show13: event.detail.show })
}
function handleChange14(event) {
  // this.setData({ show14: event.detail.show })
}
function handleChange15(event) {
  // this.setData({ show15: event.detail.show })
}
function handleChange16(event) {
  // this.setData({ show16: event.detail.show })
}
function handleChange17(event) {
  // this.setData({ show17: event.detail.show })
}
function clickOutside(event) {
  clickOut.closeOutside()
}
</script>
<style lang="scss" scoped>
.position-wrap {
  position: relative;
}
.center {
  text-align: center;
}
.left {
  float: left;
  display: flex;
  flex-direction: column;
}
.right {
  float: right;
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-bottom: 20px;
}
.top {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 20px;
}
.bottom {
  clear: both;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.demo-left {
  text-align: left;
}
.button-control {
  float: left;
}
.demo-control {
  text-align: center;
  display: block;
  padding-top: 18px;
  clear: both;
  margin-bottom: 10px;
}
.lines-demo {
  padding: 30px 0;
}
.lines-content {
  color: #fff;
  padding: 5px;
  width: 90px;
}
</style>
